<style scoped>
  .bg{
    background: -webkit-linear-gradient(left,#6379F8,#91A5F8);
  }
  .inlineLoading {
    position: fixed;
    top: 45%;
    left: 50%;
    z-index: 999999;
    margin-left: -10px;
  }

  .head{
    height:70px;
    display: flex;
    justify-content: center;
    align-items:center;
    color: #ffffff;
    padding-top:10px;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:100%;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 25px;
    color: #ffffff;
  }
  .head-middle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .head-middle>div{
    display: flex;
    justify-content: center;
  }
  .head-middle h3{
    font-size: 16px;
    color: #ffffff;
  }
  .head-middle h4{
    display: flex;
    /*width:100px;*/
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #9BABF7;
    border-radius: 12px;
    padding:0 10px;
    margin-left: 4px;
  }
  .head-right{
    position: absolute;
    right: 20px;
    top:30px;
  }
  .head-right>div{
    display: flex;
    flex-direction: row;
    border: 1px solid #ffffff;
    border-radius: 5px;
    align-items: center;
    padding:2px;
  }
  .head-right p{
    color: #ffffff;
  }
  .head-right h5{
    color: #fff;
  }
  div.main{
    padding-bottom: 60px;
  }
  .chartPic{
    height:200px;
    width:100%;
  }
  .year{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:4px 0;
    border-bottom: 1px solid #e9e9e9;
    box-shadow: 0 -2px 4px rgba(102,102,102,0.5);
  }
  .year>div{
    position: relative;
  }
  .year ul{
    position: absolute;
    left:-20px;
    top:26px;
  }
  .year ul li:first-child p{
    color: #F84949;
  }
  .year ul li:last-child{
    margin-top: -10px;
  }
  .year ul li:last-child p{
    color: #F84949;
    opacity: 0.5;
  }
  .year h1{
    font-size: 30px;
    /*color: #ff4b56;*/
  }
  .year h4{
    text-align:center;
    color: #908f99;
    font-size: 16px;
  }

  .day{
    display: flex;
    padding:10px 0;
    border-bottom: 1px solid #e9e9e9;
  }
  .day>div{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .day>div h5{
    margin-left: 4px;
    border-radius: 10px;
    padding:0 4px;
  }
  .day>.day-first h1{
    color: #093;
  }
  .day>.day-first h1 h3{
    color: #093;
  }
  .day>.day-first h5{
    background: #093;
    color: #093;
  }
  .day>.day-second h1{
    color: #F84949;
  }
  .day>.day-second h1 h3{
    color: #F84949;
  }
  .day>.day-second h5{
    background: #FF3A70;
    color: #F84949;
  }
  .day>.day-third h1{
    color: #7A7AAB;
  }
  .day-four h1{
    color: #4D66FF;
  }
  .day-four h1 h3{
    color: #4D66FF;
  }
  .day>div>div{
    display: flex;
    flex-direction: column;
  }
  .day>div>div>h1{
    display: flex;
    flex-direction: row
  }
  .day>div>div>h1>h3{
    display: flex;
    align-items: flex-end;
    margin-bottom: 2px;
  }
  .money ul{
    display: flex;
    flex-direction: row;
    /*justify-content: space-between;*/
    padding:10px 10px;
  }
  .money ul li{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .money ul li p{
    flex: 1;
  }
  .money ul li:first-child{
    border-right: 1px solid #e9e9e9;
  }
  .detailed{
    padding:8px 10px;
    background: #EDF1F5;
    display: flex;
    align-items: center;
  }
  .detailed p{
    margin-left: 6px;
  }
  .stock-table{
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .shadowActive{
    box-shadow: 0 2px 2px rgba(102,102,102,0.5);
  }
  .stock-table>div{
    width: 100%;
    display: inline-flex;
    padding: 4px 0;
    margin: 0 10px;
    border-top: 1px solid #EDF1F5;
    justify-content: center;
  }
  .stock-table>div h3{
    display: flex;
    align-items: center;
    color: rgba(102, 102, 102, 0.5);
  }
  .ryn{
    display: flex;
    flex-direction: row-reverse;
    padding: 10px 0;
  }
  .ryn ul{
    display: flex;
    margin-right: 20px;
  }
  .ryn ul li{
    width:26px;
    height: 26px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    /*background: #ffffff;*/
  }
  .ryn ul li.active{
    background: #ffffff!important;
  }
  .ryn ul li p{
    color: #ffffff;
  }
  .ryn ul li.active p{
    color: #6683ff;
  }

  .chart{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top:16px;
  }
  .chart>div{
    display: flex;
    flex-direction: row;
    font-size: 10px;
  }
  .chart-left p{
    color: #6683ff;
  }
  .chart-left h5{
    color: #ff4b56;
    margin-left: 6px;
  }
  .chart-right{
    display: flex;
    align-items: center;
  }
  .chart-right h2{
    color: #6683ff;
    margin-left: 6px;
  }
  .chart-right h2:first-child{
    margin-left: 0;
    background: #6683ff;
    color: #ffffff;
    border-radius: 11px;
    padding:2px 10px;
  }
  .line{
    height:200px;
    /*border-bottom: 6px solid #eeedf4;*/
    overflow: hidden;
  }
  .my-table{
    display: flex;
    width: 100%;
    background: #EDF1F5;
  }
  .my-table table{
    width: 96%;
    background: #ffffff;
    border-radius: 4px;
  }
  .my-table thead{
    padding: 4px;
  }
  .my-table thead{
    border-bottom: 2px solid #e9e9e9;
  }
  .my-table thead tr{
    /*width: 100%;*/
  }
  .my-table thead tr th{
    color: #a4a3a9;
    padding:6px 0;
  }
  .my-table tbody tr td{
    text-align: center;
    padding: 4px 2px;
  }
  .my-table tbody tr td p{
    /*color: #ff4b56;*/
  }
  footer{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -1px;
    width: 100%;
    height: 60px;
    background: -webkit-linear-gradient(right bottom,#91A5F8,#6379F8);
    /*border-top-right-radius: 20px;*/
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    z-index: 10;
  }
  .echarts {
    height: 200px;
    width:100%;
  }
  .feiji{
    padding:8px 16px;
    background: #EDF1F5;
    display: flex;
  }
  .feiji>h3{
    color: #91A5F8;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .feiji>p{
    margin-left: 8px;
  }
  .history-top{
    margin-top:20px;
  }
  .history-top>h1{
    text-align: center;
    font-size: 70px;
    color: #6379F8;
  }
  .history-top2{
    margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .history-top2>b{
    width:4px;
    height:40px;
    background: #E9E9E9;
  }
  .history-right{
    display: flex;
    flex-direction: row;
  }
  .history-right>div{
    flex: 1;
  }
  .history-right>div:last-child{
    display: flex;
    flex-direction: row;
  }
  .history-right>div:last-child>.point{
    display: flex;
    flex-direction: column;
    width:4px;
    background: #E9E9E9;
    margin-left: -2px;
  }
  .history-right>div:last-child>.point>.point-top{
    width:16px;
    height:16px;
    background: #ffffff;
    border-radius: 100%;
    margin-left: -6px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .history-right>div:last-child>.point>.point-top>b{
    display: block;
    width:10px;
    height:10px;
    background: #7288F8;
    border-radius: 100%;
  }
  .history-right>div:last-child>.point>.point-bottom{
    width:4px;
    height:inherit;
    background: #E9E9E9;
  }

  .history-left{
    display: flex;
    flex-direction: row;
  }
  .history-left .data-table>h4{
    text-align: right;
    margin-right: 18px;
  }
  .history-left>div{
    flex: 1;
  }
  .history-left>div:first-child{
    display: flex;
    flex-direction: row;
  }
  .history-left>div:first-child>.point{
    display: flex;
    flex-direction: column;
    width:4px;
    background: #E9E9E9;
    margin-right: -2px;
  }
  .history-left>div:first-child>.point>.point-top{
    width:16px;
    height:16px;
    background: #ffffff;
    border-radius: 100%;
    margin-left: -6px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .history-left>div:first-child>.point>.point-top>b{
    display: block;
    width:10px;
    height:10px;
    background: #7288F8;
    border-radius: 100%;
  }
  .history-left>div:first-child>.point>.point-bottom{
    width:4px;
    height:inherit;
    background: #E9E9E9;
  }


  .data-table{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .data-table>h4{
    margin-left: 10px;
  }
  .data-table ul{
    display: flex;
    flex-direction: column;
    margin:0 10px;
    background: #EDF1F5;
    border-radius: 6px;
  }
  .data-table ul li{
    display: flex;
    padding:4px 0;
  }
  .data-table ul li:first-child{
    border-bottom: 1px solid #979797;
  }
  .data-table ul li small{
    flex: auto;
    text-align: center;
  }
  .data-table ul li small:first-child{
    flex: 7;
  }
  .data-table ul li small:last-child{
    flex: 3;
  }
  .data-table ul li h4{
    text-align: center;
  }
  .data-table ul li h4:first-child{
    flex: 7;
  }
  .data-table ul li h4:last-child{
    flex: 3;
  }
  .tanchu {
    width: 100%;
    display: flex;
    position: relative;
    /*height: 300px;*/
    flex-direction: column;
    color: #555;
  }
  .magical{
    position: absolute;
    top:-18px;
    left:20px;
    background: #ffffff;
    box-shadow: 0 2px #ccc;
    /*width:200px;*/
    /*height:40px;*/
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 6px 16px;
  }
  .tanchu>.t1{
    width:100%;
    height:50px;
    display: flex;
    border-bottom: 1px solid #dedde3;
    padding-bottom: 10px;
  }
  .tanchu>.t1>ul{
    display: flex;
    margin: 10px 0 0 20px;
  }
  .tanchu>.t1>ul>li:last-child{
    margin-left: 40px;
  }
  .tanchu>.t1>ul>li>h1{
    color: #a4a3a9;
    font-size: 12px;
    text-align: center;
    margin-top: -4px;
  }
  .t{
    margin-top: 36px;
  }
  .t>div{
    border-bottom: 1px solid #e9e9e9;
    padding: 10px 20px
  }
  .t1 ul{
    display: flex;
    flex-direction: row;
  }
  .t1 ul>li:last-child{
    margin-left: 20px;
  }
  .t1 ul>li>h1{
    color: #F84949;
  }
  .t1 ul>li>p{
    color: rgba(158,153,169,0.7);
  }
  .othert1 ul li{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .othert1 ul li h1{
    margin-left: 10px;
  }
  .othert3{
    display: flex;
    flex-direction: row;
    padding:14px 20px!important;
  }
  .othert3 p{
    display: flex;
    align-items: center;
  }
  .othert3>div{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    height:100%;
  }
  .othert3>div>input{
    border: none;
    height:26px;
    background: #F5F5F5;
    border-radius: 8px;
    padding-left: 10px;
    margin-left: 4px;
    font-size: 12px;
  }
  .othert3>div>input::-webkit-input-placeholder{

  }
  .t2{
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .t2 ul{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }
  .t2 ul li{
    border-radius: 10px;
    padding:4px 16px;
    color: #ffffff;
    font-weight: 300;
    background: #F5F5F5;
    color: #666666;
  }
  .t2 ul li.active1 {
    background: linear-gradient(to right, #6379F8, #91A5F8)!important;
  }
  .t2 ul li.active1 p{
    color: #fff;
  }
  .t2 ul li:last-child{
    margin-left: 80px;
  }
  .t3{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:14px 20px!important;
    align-items: center;
  }
  .t3 .num ul{
    display: flex;
    flex-direction: row;
  }
  .t3 .num ul li{
    display: flex;
    justify-content: center;
    align-items:center;
    margin-left: 2px;
  }
  .t3 .num ul li:first-child{
    width:26px;
    height:26px;
    background: #ECECEC;
    color: #ADADAD;
  }
  .t3 .num ul li:nth-child(2){
    width:42px;
    height:26px;
    background: #D8D8D8;
    color: #666;
  }
  .t3 .num ul li:last-child{
    width:26px;
    height:26px;
    background: #D8D8D8;
    color: #ADADAD;
  }
  .t4{
    display: flex;
    flex-direction: column;
  }
  .t4 ul{
    display: flex;
    flex-direction: row;
    margin-top: 8px;
  }
  .t4 ul li{
    flex: auto;
  }
  .t4 ul li p{
    text-align: center;
  }
  .t4 ul li h3{
    text-align: center;
  }
  .t4 ul li:first-child h3,.t4 ul li:nth-child(2) h3{
    color: #667DF7;
  }
  .t4 ul li P{
    color: rgba(102,102,102,0.5);
  }
  .gendan{
    width: 100%;
  }
  .gendan ul{
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right,#6379F8,#91A5F8);
  }
  .gendan ul li{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    /*padding:10px 0;*/
  }
  .gendan ul li h3{
    font-weight: 300;
    letter-spacing:3px;
    color: #ffffff;
  }
  .gendan ul li h4{
    margin-top: 12px;
    margin-left: 2px;
    font-weight: 300;
    color: #ffffff;
  }
  .gendan ul li:first-child{

  }
  .gendan ul li:last-child{
    /*background: linear-gradient(to left, #91A5F8, #6379F8)*/
    margin-left: 4px;
  }
  .gendan ul>div{
    height:46px;
    width:1px;
    background: #ffffff;
  }
  .my-table>table>tbody>tr>td:nth-child(2)>p{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    text-align: center
  }
  .data-table ul li h4:first-child{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    text-align: center
  }

  @media screen and (max-width: 320px) {
    .my-table>table>tbody>tr>td:nth-child(2)>p{
      width:112px;
    }
    .data-table ul li h4:first-child{
      width:78px;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .my-table>table>tbody>tr>td:nth-child(2)>p{
      width:135px;
    }
    .data-table ul li h4:first-child{
      width:88px;
    }
  }
  @media screen and (min-width: 376px){
    .my-table>table>tbody>tr>td:nth-child(2)>p{
      width:144px;
    }
    .data-table ul li h4:first-child{
      width:98px;
    }
  }

  .optimize {
    animation: myfirst 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
  }

  @keyframes myfirst {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(90deg)
    }
  }

  .optimize2 {
    animation: myfirst2 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
  }

  @keyframes myfirst2 {
    0% {
      transform: rotate(90deg)
    }
    100% {
      transform: rotate(0deg)
    }
  }


</style>
<style>
  .mint-popup{
    width:100%;
  }
  /*.mint-popup-bottom{
    bottom: 0!important;
  }*/
  .mint-msgbox-wrapper{
    position: static!important;
    z-index:99999999!important;
  }
  .mint-msgbox{
    z-index: 99999999;
  }
  .mint-toast{
    z-index: 10000!important;
    top:60%!important;
  }
  .mint-loadmore-bottom{
    display: none;
    height:0;
  }
  .mint-loadmore-content{
    transform: translate3d(0px, 0px, 0px)!important;
  }
  .mint-loadmore-bottom{
    margin-top: 50px;
  }

</style>

<template>
  <div class="subscribe">
    <mt-popup
      v-if="online"
      v-model="popupVisible"
      position="bottom" ref="forbidMove">
      <div class="tanchu">
        <div class="magical"><h2 v-if="allData.labels">{{allData.labels.country}}·{{allData.labels.index_name}}</h2></div>
        <!--<div class="close">关闭</div>-->
        <div class="t">
          <div class="t1" v-if="number">
            <ul>
              <li>
                <h1 v-if="allData">${{allMoney*allData.fx | money}}</h1>
                <p>认购金额</p>
              </li>
              <li>
                <h1 v-if="allData">${{price*allData.fx | money}}</h1>
                <p>每份策略市值</p>
              </li>
            </ul>
          </div>
          <div class="othert1" v-if="money">
            <ul>
              <li>
                <p>认购金额</p>
                <h1 style="color: #f84949;">${{rengoujine | money}}</h1>
              </li>
            </ul>
          </div>
          <div class="t2">
            <p>选择认购方式</p>
            <ul>
              <li v-bind:class="{active1:isActive}" @click="numberBuy"><p>份数认购</p></li>
              <li v-bind:class="{active1:active}" @click="moneyBuy"><p>金额认购</p></li>
            </ul>
          </div>
          <div class="t3" v-show="number">
            <p>认购份数</p>
            <div class="num">
              <ul>
                <li @click="subtract">
                  <h3>-</h3>
                </li>
                <li>
                  <p>{{grade}}</p>
                </li>
                <li @click="plus">
                  <h3>
                    +
                  </h3>
                </li>
              </ul>
            </div>
          </div>
          <div class="othert3" v-show="money">
            <p>认购金额</p>
            <div><p>$</p><input ref="input" type="number" name="number" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" placeholder="请输入交易金额" v-model="rengoujine"></div>
          </div>
          <div class="t4">
            <p>认购必读</p>
            <ul>
              <li>
                <h3 v-if="mustRead.total_value===null">$0</h3>
                <h3 v-else>${{mustRead.total_value | money}}</h3>
                <p>可用金额</p>
              </li>
              <li>
                <h3 v-if="mustRead.buying_power===null">$0</h3>
                <h3 v-else>${{mustRead.buying_power | money}}</h3>
                <p>最多透资金额</p>
              </li>
              <li>
                <h3 v-if="mustRead.total_position===null">$0</h3>
                <h3 v-else>${{mustRead.total_position | money}}</h3>
                <p>交易市值</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="gendan">
          <ul>
            <li @click="smart">
              <h3>智能跟单</h3>
              <h4>(推荐)</h4>
            </li>
            <div></div>
            <li @click="startBuy">
              <!--<router-link to="../buySuccess">-->
              <h3>开始认购</h3>
              <!--</router-link>-->
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
    <div>
      <div class="head" style="top: 0;z-index: 99999999;position: fixed;width: 100%;background: -webkit-linear-gradient(left,#6379F8,#91A5F8);">
        <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
        <div class="head-middle" v-if="online">
          <h3>{{allData.labels.country}}·{{allData.labels.index_name}}</h3>
          <div>
            <h4>{{allData.labels.feature}}</h4>
            <h4>{{allData.labels.size_name}}</h4>
          </div>
        </div>
        <div class="head-right" @click="follow(allData.follow)">
          <div>
            <p class="iconfont" v-bind:class="{'icon-jiahao1':jiahaofocus}"></p>
            <h5>{{focus}}</h5>
          </div>
        </div>
      </div>
    <scroller lock-x ref="scroller" :bounce="false" @on-scroll-bottom="loadBottomUse" height="-60">
    <div>
    <div class="bg" style="margin-top: 70px">

      <div class="ryn">
        <ul>
          <li @click="all" v-bind:class="{active:allActive}"><p>全</p></li>
          <li @click="week" v-bind:class="{active:weekActive}"><p>周</p></li>
          <li @click="month" v-bind:class="{active:monthActive}"><p>月</p></li>
          <li @click="year" v-bind:class="{active:yearActive}"><p>年</p></li>
        </ul>
      </div>
      <div class="line">
        <chart :options="line" width="100%"></chart>
      </div>
    </div>
    <v-networkerr v-if="!$store.state.networkState" v-on:reload="findData"></v-networkerr>
    <div v-else>
    <div class="main">
      <div class="year">
        <div>
          <h4>近一年收益</h4>
          <h1>{{allData.yr | percent}}%</h1>
          <ul>
            <li>
              <p class="iconfont icon-shangzhang1"></p>
            </li>
            <li>
              <p class="iconfont icon-shangzhang1"></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="shouyi">
        <div class="day">
          <div class="day-first">
            <div><h4>日收益</h4><h1>{{allData.dr | percent}}<h3>%</h3></h1></div>
          </div>
          <div class="day-second">
            <div><h4>月收益</h4><h1>{{allData.mr | percent}}<h3>%</h3></h1></div>
          </div>
          <div class="day-four">
            <div>
              <h4>波动率</h4>
              <h1>{{allData.volatility | percent}}<h3>%</h3></h1>
            </div>
          </div>
          <div class="day-third">
            <h1><h4>夏普比率</h4>{{allData.sharpR | toFixed }}</h1>
          </div>
        </div>
        <div class="money">
          <ul>
            <li>
              <h4>证券池选择</h4>
              <h4>{{allData.pool.name}}</h4>
            </li>
            <li>
              <h4>建议最低购买金额</h4>
              <h4>{{allData.symbol}}{{minBuy | money}}</h4>
            </li>
          </ul>
        </div>
        <div class="detailed">
          <h3>
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-zuhexiangqingicon"></use>
            </svg>
          </h3>
          <p>组合详情</p>
        </div>
        <div class="detail-text" style="padding:20px 10px;">
          <p v-if="allData.desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allData.desc}}</p>
          <p v-else style="text-align:center;">暂无详情，敬请期待!</p>
        </div>

      </div>
      <div class="stock-table" :class="{shadowActive:isShadowTable}" @click='clickStockTable'>
        <div class="stick-tableinner">
          <p>查看相关表格</p>
          <h3 class="iconfont icon-xiangyou1" :class="{optimize: show,optimize2:show2}"></h3>
        </div>
      </div>
      <div class="my-table" v-if="isShadowTable">
        <table align="center">
          <thead>
          <tr>
            <th @click="sortFunc('s')">证券代码
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.s === 1">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.s">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.s === 2">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleNormal"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('d')">描述
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.d === 1">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.d">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.d === 2">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleNormal"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('w')">占比
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.w === 1">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.w">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.w === 2">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleNormal"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('p')">价格
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.p === 1">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.p">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.p === 2">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleNormal"></use>
                </svg>
              </i>
            </th>
            <th @click="sortFunc('q')">份数
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.q === 1">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleDown"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="!sortControl.q">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleUp"></use>
                </svg>
              </i>
              <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.q === 2">
                <svg class="icon"
                     aria-hidden="true">
                  <use :xlink:href="triangleNormal"></use>
                </svg>
              </i>
            </th>
          </tr>
          </thead>
          <tbody>
          <div v-if="!allData.stocks"></div>
          <tr v-else v-for="stock in allData.stocks">
            <td><p>{{stock.s}}</p></td>
            <td><p v-model:title="stock.d">{{stock.d}}</p></td>
            <td><p>{{stock.w | percent}}%</p></td>
            <td><p>{{stock.p | toFixed}}</p></td>
            <td><p>{{stock.q}}</p></td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--<div style="width:100%;height: 10px;background: #edf1f5;"></div>-->

      <div class="feiji">
        <h3 class="iconfont icon-xiaofeiji"></h3>
        <p>历史调仓</p>
      </div>
      <div class="history">
        <div class="history-top">
          <h1 class="iconfont icon-feiji"></h1>
        </div>
        <div class="history-top2">
          <b></b>
        </div>
        <!--<mt-loadmore :bottom-method="loadBottomUse"
                     :bottomAllLoaded="allUseLoad"
                     :bottomPullText='bottomText'
                     :bottomLoadingText='bottomLoadingText'
        > -->
          <div v-if="adjustHistorys" v-for="(adjustHistory,index) in adjustHistorys" >
            <div class="history-right" v-if="index%2===0">
              <div></div>
              <div>
                <div class="point">
                  <div class="point-top">
                    <b></b>
                  </div>
                  <div class="point-bottom"></div>
                </div>
                <div class="data-table">
                  <h4>{{adjustHistory.day}}</h4>
                  <ul>
                    <li>
                      <small>证券</small>
                      <small>占比</small>
                    </li>
                    <li v-for="stock in adjustHistory.stocks">
                      <h4>{{stock.n}}</h4>
                      <h4>{{stock.w | percent}}</h4>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="history-left" v-if="index%2===1">
              <div>
                <div class="data-table">
                  <h4>{{adjustHistory.day}}</h4>
                  <ul>
                    <li>
                      <small>证券</small>
                      <small>占比</small>
                    </li>
                    <li v-if="adjustHistory.stocks" v-for="stock in adjustHistory.stocks">
                      <h4>{{stock.n}}</h4>
                      <h4>{{stock.w | percent}}</h4>
                    </li>
                  </ul>
                </div>
                <div class="point">
                  <div class="point-top">
                    <b></b>
                  </div>
                  <div class="point-bottom"></div>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        <!--</mt-loadmore> -->
        <p style="text-align: center;margin-top: 10px;margin-bottom: 10px" v-if="!isBottom">上拉加载更多</p>
        <p style="text-align: center;margin-top: 10px;margin-bottom: 10px" v-if="isBottom">已经到底了</p>
      </div>
    </div>
    </div>
    </div>
    </scroller>
    <footer @click="popUp">
      立 即 认 购
    </footer>
    </div>
  </div>
  </div>
</template>

<script>
  import ECharts from '../../node_modules/vue-echarts/components/ECharts.vue'
  import '../../node_modules/echarts/lib/echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/graphic'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import { Popup } from 'mint-ui'
  import axios from 'axios'
  import {Indicator, Loadmore} from 'mint-ui'
  import { MessageBox } from 'mint-ui'
  import host from '../config.js'
  import {Toast} from 'mint-ui'
  import { sort, sortControl } from '../plugins/sort'
  import plugins from '../plugins/'
  import ecConfig from 'vue-echarts/config'
  import { Scroller } from 'vux'

  export default {
    components: {
      chart: ECharts,
      mtPopup: Popup,
      mtLoadmore: Loadmore,
      Scroller
    },
    data () {
      return {
        pullupConfig: {
          content: 'Pull Up To Refresh',
          pullUpHeight: 60,
          height: 40,
          autoRefresh: false,
          downContent: 'Release To Refresh',
          upContent: 'Pull Up To Refresh',
          loadingContent: 'Loading...',
          clsPrefix: 'xs-plugin-pullup-'
        },
        minBuy: '',
        // 货币单位
        popupVisible: false,
        isActive: true,
        active: false,
//      总数据
        allData: {
            "date": [
                ""
            ],
            "symbol": "",
            "benchmarkN": [
                0
            ],
            "mr": 0,
            "dr": 0,
            "labels": {
                "country": "",
                "size_name": "",
                "index_name": "",
                "feature": ""
            },
            "minBuy": 0,
            "pool": {
                "name": "",
                "code": ""
            },
            "volatility": 0,
            "stocks": [
                {
                    "q": 0,
                    "w": 0,
                    "d": "",
                    "s": "",
                    "p": 0
                }
            ],
            "portfolioN": [0],
            "currency": "",
            "sharpR": 0,
            "fx": 0,
            "benchmark": {
                "name": "",
                "code": ""
            },
            "yr": 0
        },
        //      份数认购
        number: true,
//      金额认购
        money: false,

//      认购必读
        mustRead: {

        },
//      名称
        getName: '',
        getId: 0,
//      上拉加载更多
        length: 0,
        //      调仓
        adjustHistorys: [],
//        pageNo: 1,
        allUseLoad: false,
        bottomText: '上拉加载更多...',
        bottomLoadingText: '加载中',
        totalGetCount: '',
        day:'',
//      份数
        grade: 1,
//      策略市值
        price: 0,
        allMoney: 0,
//      金额认购
        rengoujine: 0,
        online: true,
//      周月年
        allActive: false,
        weekActive: false,
        monthActive:false,
        yearActive: true,

        line: {},

        sortControl: {
          q: 0,
          p: 0,
          w: 0,
          s: 0
        },
        triangleUp: '#icon-paixu',
        triangleDown: '#icon-paixu1',triangleDown: '#icon-paixu1',
        triangleNormal: '#icon-paixu3',
        isBottom: false,
//        是否点击关注
        clickFollow: false,
        focus: '关注',
        jiahaofocus: null,
        isShadowTable: false,
        show:false,
        show2:false
      }
    },
    created () {
      this.findData()
      this.year()
    },
    mounted () {

    },
    watch: {
      popupVisible: function(newData) {
        if(newData === false) {
          window.removeEventListener('touchmove',this.removeTouch,false)
        }
      }
    },
    activated () {
      this.findData()
      this.year()
      this.$refs.scroller.reset({top: 0})
      this.isBottom = false
      this.clickFollow = false
    },
    methods: {
      removeTouch (e) {
        e.preventDefault()
      },
      findData () {
        window.onresize = ECharts.resize
        let that = this
        this.getId = this.$route.query.id.split('&')[0]
//        this.getName =  this.$route.query.id.split('&')[1]

//    页面总数据
        // axios({
        //   method: 'GET',
        //   headers: {'Authorization': this.token},
        //   url: host.host + "/api/strategy/detail?s="+this.getId,
        //   timeout: 3500
        // })
        this.$http.get(`strategy/detail?s=${this.getId}`).then(function (data) {
          that.online = navigator.onLine
          that.price = 0
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          var xdata = []
          that.line = {
            tooltip: {
              show: true,
              trigger: 'axis',
              backgroundColor: 'rgba(255, 255 ,255, 0.8)',
              textStyle: {
                color: '#666'
              },
              extraCssText: {
                extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
              },
              axisPointer: {
              }
            },
            legend: {
            },
            grid: {
              left: '2%',
              top: '4%',
              right: '3%',
              bottom: '3%',
              width: '100%',
              containLabel: true
            },
            xAxis: [
              {
                splitLine: {
                  show: false
                },
                boundaryGap: false,
                axisLabel: {
                  show: false
                },
                axisPointer: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.35)'
                  }
                },
                axisTick: false,
                axisLine: {
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8,
                    width: 2
                  }
                },
                data: xdata
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitNumber: 3,
                splitLine: {
                  show: true,
                  lineStyle:{
                    type: 'dashed',
                    color: '#e9e9e9',
                    opacity: 0.5
                  }
                },
                boundaryGap: false,
                axisLabel: {
                  show: true
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8
                  }
                },
                axisTick: false
              }
            ],
            series: [
              {
                smooth:true,
                name: '本组合收益(%)',
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#F9C859'
                  }
                },
                data: []
              },
              {
                smooth:true,
                name: data.data.data.benchmark.name + '(%)',
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#ffffff'
                  }
                },
                data: []
              }

            ]
          }
          if(data.data.code === 200) {
            that.allData = data.data.data
            if(that.allData.follow == true) {
              that.jiahaofocus = false
              that.focus = '取消关注'
            } else {
              that.jiahaofocus = true
              that.focus = '关注'
            }
            var dataLength = data.data.data.benchmarkN.length
            for(var i = 0; i < dataLength; i++){
              that.line.series[1].data.push((data.data.data.benchmarkN[i]*100).toFixed(2))
            }
            for(var j = 0; j < dataLength; j++){
              that.line.series[0].data.push((data.data.data.portfolioN[j]*100).toFixed(2))
            }
            for(var k = 0; k < dataLength+10; k++){
              xdata.push((data.data.data.date[k]))
            }
            if(that.allData.currency == 'GBP') {
              for(var l = 0; l < that.allData.stocks.length; l++){
                that.price += that.allData.stocks[l].p * that.allData.stocks[l].q * 0.01
                that.allMoney = that.price
              }
              that.minBuy = that.allData.minBuy / 100
            }else {
              for(var l = 0; l < that.allData.stocks.length; l++){
                that.price += that.allData.stocks[l].p * that.allData.stocks[l].q
                that.allMoney = that.price
              }
              that.minBuy = that.allData.minBuy
            }
          }
          that.$nextTick(() => {
            that.$refs.scroller.reset({top: 0})
          })
        }).catch((err) => {
          this.online = false
          if (err === 'timeout') this.$store.state.networkState = false
        })

        //    调仓记录
        axios({
          method: 'POST',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/strategy/adjustHistory",
          data: {
            "sid": this.getId
          }
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            that.adjustHistorys = data.data.data
//          console.log(data.data.data)
            that.length = data.data.data.length
            if(that.length>0){
              that.day = that.adjustHistorys[that.adjustHistorys.length-1].day
            }else{
              that.length = 0
            }
            that.$nextTick(() => {
              that.$refs.scroller.reset()
            })
          }
        })

//    认购必读
        axios({
          method: 'get',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/capital"
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            that.mustRead = data.data.data
          }
        })
      },
      sortFunc (value) {
        this.sortControl = sortControl(this.sortControl, value)
        this.$nextTick(() => {
          this.allData.stocks = sort(this.allData.stocks, value, this.sortControl[value] === 1 ? 'sort' : 'reverse')
        })
      },
      popUp () {
        let that = this
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/iBind"
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if (data.data.code === 200) {
            if(data.data.data.account){
              that.popupVisible = true
              window.addEventListener('touchmove',that.removeTouch,false)
              that.grade = 1
              document.getElementsByTagName('input')[0].addEventListener('focus', () => {
                console.log('focus')
              document.getElementsByClassName('head')[0].style.position = 'absolute'
            })
              document.getElementsByTagName('input')[0].addEventListener('blur', () => {
                console.log('blur')
              document.getElementsByClassName('head')[0].style.position = 'fixed'
            })
              that.rengoujine = null
            }
          }else{
            MessageBox.confirm('您还没有开户,去开户?').then(action=>{
              that.$router.push('/open2')
          })
          }
        })

      },
      goBack () {
        window.removeEventListener('touchmove',this.removeTouch,false)
        this.$router.go(-1)
      },
      numberBuy () {
        this.isActive = true
        this.active = false
        this.number = true
        this.money = false
      },
      moneyBuy () {
        this.isActive = false
        this.active = true
        this.number = false
        this.money = true
      },
//    下拉刷新
      loadBottomUse () {
        if(this.length === 0)return
        let that = this
        if(that.isBottom == true) {
          return
        }
        axios({
          method: 'POST',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/strategy/adjustHistory",
          data: {
            "sid": that.getId,
            "day": that.day,
            "size": 7
          }
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200) {
            if(!data.data.data){
              that.isBottom = true
              return
            }
            that.adjustHistorys = that.adjustHistorys.concat(data.data.data);
            that.day = that.adjustHistorys[that.adjustHistorys.length-1].day
            that.length = data.data.data.length
          }
          that.$nextTick(() => {
            that.$refs.scroller.reset()
          })
        })
      },
      year () {
        this.allActive = false
        this.weekActive = false
        this.monthActive = false
        this.yearActive = true
        var xdata = []
        this.line = {
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255 ,255, 0.8)',
            textStyle: {
              color: '#666'
            },
            extraCssText: {
              extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
            },
            axisPointer: {
            }
          },
          legend: {
          },
          grid: {
            left: '2%',
            top: '4%',
            right: '3%',
            bottom: '3%',
            width: '100%',
            containLabel: true
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.35)'
                }
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
//                  type: 'dashed',
                  color: '#e9e9e9',
                  opacity: 0.8,
                  width: 2
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitNumber: 3,
              splitLine: {
                show: true,
                lineStyle:{
                  type: 'dashed',
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              },
              boundaryGap: false,
              axisLabel: {
                show: true
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              axisTick: false
            }
          ],
          series: [
            {
              smooth:true,
              name: '本组合收益(%)',
              type: 'line',
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#F9C859'
                }
              },
              data: []
            },
            {
              smooth:true,
              name: this.allData.benchmark.name + '(%)',
              type: 'line',
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
              },
              data: []
            }
          ]
        }
        for(var i = 0; i< this.allData.benchmarkN.length; i++){
          this.line.series[1].data.push((this.allData.benchmarkN[i]*100).toFixed(2))
        }
        for(var j = 0; j< this.allData.benchmarkN.length; j++){
          this.line.series[0].data.push((this.allData.portfolioN[j]*100).toFixed(2))
        }
        for(var k = 0; k< this.allData.benchmarkN.length + 10; k++){
          xdata.push(this.allData.date[k])
        }
      },
      month () {
        this.allActive = false
        this.weekActive = false
        this.monthActive = true
        this.yearActive = false
        var xdata = []
        this.line = {
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255 ,255, 0.8)',
            textStyle: {
              color: '#666'
            },
            extraCssText: {
              extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
            },
            axisPointer: {
            }
          },
          legend: {
          },
          grid: {
            left: '2%',
            top: '4%',
            right: '3%',
            bottom: '3%',
            width: '100%',
            containLabel: true
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.35)'
                }
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8,
                  width: 2
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitNumber: 3,
              splitLine: {
                show: true,
                lineStyle:{
                  type: 'dashed',
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              },
              boundaryGap: false,
              axisLabel: {
                show: true
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              axisTick: false
            }
          ],
          series: [
            {
              smooth:true,
              name: '本组合收益(%)',
              type: 'line',
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#F9C859'
                }
              },
              data: []
            },
            {
              smooth:true,
              name: this.allData.benchmark.name + '(%)',
              type: 'line',
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
              },
              data: []
            }
          ]
        }
        let num = this.allData.benchmarkN.length
        for(var i = (num - 22); i < num; i++){
          this.line.series[1].data.push((((this.allData.benchmarkN[i]+1)/(this.allData.benchmarkN[num-22]+1)-1)*100).toFixed(2))
        }
        for(var j = (num - 22); j < num; j++){
          this.line.series[0].data.push((((this.allData.portfolioN[j]+1)/(this.allData.portfolioN[num-22]+1)-1)*100).toFixed(2))
        }
        for(var k = (num - 22); k < (num+1); k++){
          xdata.push(this.allData.date[k])
        }
      },
      week () {
        this.allActive = false
        this.weekActive = true
        this.monthActive = false
        this.yearActive = false
        var xdata = []
        this.line = {
          tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255 ,255, 0.8)',
            textStyle: {
              color: '#666'
            },
            extraCssText: {
              extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
            },
            axisPointer: {
            }
          },
          legend: {
          },
          grid: {
            left: '2%',
            top: '4%',
            right: '3%',
            bottom: '3%',
            width: '100%',
            containLabel: true
          },
          xAxis: [
            {
              splitLine: {
                show: false
              },
              boundaryGap: false,
              axisLabel: {
                show: false
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.35)'
                }
              },
              axisTick: false,
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8,
                  width: 2
                }
              },
              data: xdata
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitNumber: 3,
              splitLine: {
                show: true,
                lineStyle:{
                  type: 'dashed',
                  color: '#e9e9e9',
                  opacity: 0.5
                }
              },
              boundaryGap: false,
              axisLabel: {
                show: true
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#e9e9e9',
                  opacity: 0.8
                }
              },
              axisTick: false
            }
          ],
          series: [
            {
              smooth:true,
              name: '本组合收益(%)',
              type: 'line',
              symbol:'circle',
              symbolSize: 4,
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#F9C859'
                }
              },
              data: []
            },
            {
              smooth:true,
              name: this.allData.benchmark.name + '(%)',
              type: 'line',
              symbol:'circle',
              symbolSize: 6,
              areaStyle: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
              },
              data: []
            }
          ]
        }
        let num = this.allData.benchmarkN.length
        for(var i = (num - 7); i < num; i++){
          this.line.series[0].data.push((((this.allData.benchmarkN[i]+1)/(this.allData.benchmarkN[num-7]+1)-1)*100).toFixed(2))
        }
        for(var j = (num - 7); j < num; j++){
          this.line.series[1].data.push((((this.allData.portfolioN[j]+1)/(this.allData.portfolioN[num-7]+1)-1)*100).toFixed(2))
        }
        for(var k = (num - 7); k < (num+1); k++){
          xdata.push(this.allData.date[k])
        }

      },
      all () {
        this.allActive = true
        this.weekActive = false
        this.monthActive = false
        this.yearActive = false
        let that = this
        this.getId = this.$route.query.id.split('&')[0]
        this.$http.get(`/strategy/curveHistory?s=${this.getId}`).then(function (data) {
          that.online = navigator.onLine
          that.price = 0
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          var xdata = []
          that.line = {
            tooltip: {
              show: true,
              trigger: 'axis',
              backgroundColor: 'rgba(255, 255 ,255, 0.8)',
              textStyle: {
                color: '#666'
              },
              extraCssText: {
                extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
              },
              axisPointer: {
              }
            },
            legend: {
            },
            grid: {
              left: '2%',
              top: '4%',
              right: '6%',
              bottom: '3%',
              width: '96%',
              containLabel: true
            },
            xAxis: [
              {
                splitLine: {
                  show: false
                },
                boundaryGap: false,
                axisLabel: {
                  show: false
                },
                axisPointer: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.35)'
                  }
                },
                axisTick: false,
                axisLine: {
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8,
                    width: 2
                  }
                },
                data: xdata
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitNumber: 3,
                splitLine: {
                  show: true,
                  lineStyle:{
                    type: 'dashed',
                    color: '#e9e9e9',
                    opacity: 0.5
                  }
                },
                boundaryGap: false,
                axisLabel: {
                  show: true
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8
                  }
                },
                axisTick: false
              }
            ],
            series: [
              {
                smooth:true,
                name: '本组合收益(%)',
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#F9C859'
                  }
                },
                data: []
              },
              {
                smooth:true,
                name: data.data.data.benchmark.name + '(%)',
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#ffffff'
                  }
                },
                data: []
              }

            ]
          }
          if(data.data.code === 200) {
            let benchmarkN = data.data.data.benchmarkN
            let date = data.data.data.date
            let portfolioN = data.data.data.portfolioN
            var dataLength = data.data.data.benchmarkN.length
            for(var i = 0; i < dataLength; i++){
              that.line.series[1].data.push((benchmarkN[i]*100).toFixed(2))
            }
            for(var j = 0; j < dataLength; j++){
              that.line.series[0].data.push((portfolioN[j]*100).toFixed(2))
            }
            for(var k = 0; k < dataLength+10; k++){
              xdata.push((date[k]))
            }
//            if(that.allData.currency == 'GBP') {
//              for(var l = 0; l < that.allData.stocks.length; l++){
//                that.price += that.allData.stocks[l].p * that.allData.stocks[l].q * 0.01
//                that.allMoney = that.price
//              }
//              that.minBuy = that.allData.minBuy / 100
//            }else {
//              for(var l = 0; l < that.allData.stocks.length; l++){
//                that.price += that.allData.stocks[l].p * that.allData.stocks[l].q
//                that.allMoney = that.price
//              }
//              that.minBuy = that.allData.minBuy
//            }
          }
        }).catch((err) => {
          this.online = false
        if (err === 'timeout') this.$store.state.networkState = false
      })
      },

      subtract () {
        if(this.grade > 1){
          this.grade -= 1
          this.allMoney = this.grade * this.price
        }
      },
      plus () {
        this.grade += 1
        this.allMoney = this.grade * this.price
      },


//    认购
      buy (track) {
        window.removeEventListener('touchmove',this.removeTouch,false)
        let that = this
        var data
        if (that.number === true) {
          if((this.allMoney*this.allData.fx)>this.mustRead.buying_power){
            Toast({
              message: '您的金额不足',
              duration: 1000
            })
            return
          }
          // if(that.allData.currency == 'GBP') {
          //   if(((this.allMoney/100)*this.allData.fx)>this.mustRead.buying_power){
          //     Toast({
          //       message: '您的金额不足',
          //       duration: 1000
          //     })
          //     return
          //   }
          // }
          data = {
            "sid": that.getId,
            "type": "copies",
            "amount": that.grade,
            "track": track
          }
        }else if (that.money === true) {
          if(this.rengoujine>this.mustRead.buying_power){
            Toast({
              message: '您的金额不足',
              duration: 1000
            })
            return
          }
          if(that.allData.currency == 'GBP') {
            that.rengoujine = parseInt(that.rengoujine) * 100
          }
          data = {
            "sid": that.getId,
            "type": "money",
            "amount": parseInt(that.rengoujine / this.allData.fx),
            "track": track
          }
        }
        axios({
          method: 'POST',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/strategy",
          data: data
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200){
            that.popupVisible = false
            if (track) {
              that.$store.state.followSuccess = data.data.data
              that.$router.push('../followSuccess')
              //            跟单成功
            }else{
              that.$store.state.buySuccess = data.data.data
              that.$router.push('../buySuccess')
            }
          }
        })

      },
//    开始认购
      startBuy () {
        this.buy(false)
      },
      smart () {
        this.buy(true)
      },
//      关注
      follow (_this) {
        let that = this
        let data = {
          s: that.getId
        }
        if(that.focus == '取消关注') {
          axios({
            method: 'POST',
            headers: {'Authorization': window.localStorage.getItem('token')},
            url: host.host + "/api/strategy/unfollow",
            data: JSON.stringify(data)
          }).then(function (data) {
            if(data.data.code === 6006) {
              that.$router.push('/login')
            }
            if(data.data.code === 6007){
              that.$refreshToken()
            }
            if(data.data.code === 200){
              that.clickFollow = true
              Toast({
                message: '取消成功',
                duration: 1500
              })
              that.focus = '关注'
              that.jiahaofocus = true
            }
          })
        }else if (that.focus == '关注'){
          axios({
            method: 'POST',
            headers: {'Authorization': window.localStorage.getItem('token')},
            url: host.host + "/api/strategy/follow",
            data: JSON.stringify(data)
          }).then(function (data) {
            if(data.data.code === 6006) {
              that.$router.push('/login')
            }
            if(data.data.code === 6007){
              that.$refreshToken()
            }
            if(data.data.code === 200){
              that.clickFollow = true
              Toast({
                message: '关注成功',
                duration: 1500
              })
              that.focus = '取消关注'
              that.jiahaofocus = false
            }
          })
        }
//        if(_this == true) {
//          Toast({
//            message: '已关注',
//            duration: 1500
//          })
//          return
//        }
      },
      clickStockTable () {
        this.isShadowTable = !this.isShadowTable
        this.show1 = !this.show1
        if (!this.show) {
          this.show = !this.show
        } else {
          this.show2 = !this.show2
        }
        this.$nextTick(() => {
          this.$refs.scroller.reset()
        })
      }
    },
    filters: {
      percent (data) {
        if(data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return 0
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return 0
        }
      },
      money (data) {
        if(data) {
          if(data>10000) {
            return (parseFloat(data/10000)).toFixed(2) + '万'
          }else {
            return (parseFloat(data)).toFixed(2)
          }
        }else {
          return 0
        }
      }
    }
  }
</script>
